<template>
  <div class="user-box">
    <sHeader :name="'我的'"></sHeader>
    <!--  用户信息展示区域 -->
    <div class="user-info">
      <div class="info">
        <img src="//s.weituibao.com/1583583975067/user-graduate%20(1).png" alt="" />
        <div class="user-desc">
          <span>昵称:{{ state.user.nickName }}</span>
          <span>登录名:{{ state.user.loginName }}</span>
          <span class="name">个性签名:{{ state.user.introduceSign }}</span>
        </div>
      </div>
    </div>
    <ul class="user-list">
      <li><span>我的订单</span><van-icon name="arrow" /></li>
      <li><span>账号管理</span><van-icon name="arrow" /></li>
      <li><span>地址管理</span><van-icon name="arrow" /></li>
      <li><span>关于我们</span><van-icon name="arrow" /></li>
    </ul>
    <navbar></navbar>
  </div>
</template>
<script lang="ts" setup>
import navbar from "@/components/navbar.vue";
import sHeader from "@/components/simpleHeader.vue";
import { getUserInfo } from "@/service/user";
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route.path);

const state = reactive({
  user: {}, // 用户信息
});
onMounted(async () => {
  const { data } = await getUserInfo(); // 获取用户信息

  state.user = data;
});
</script>
<style lang="less" scoped>
@import "../common/style/mixin";
.user-box {
  width: 94%;
  margin: 10px;
  height: 115px;
  background: linear-gradient(90deg, @primary, #51c7c7);
  box-shadow: 0 2px 5px #269090;
  border-radius: 6px;
  margin-top: 50px; // 适配刘海屏
  .info {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 25px 20px;
    .boxSizing();
    img {
      .wh(60px, 60px);
      border-radius: 50%;
      margin-top: 4px;
    }
    .user-desc {
      display: flex;
      flex-direction: column; // 垂直排列
      margin-left: 10px;
      line-height: 20px;
      font-size: 14px;
      color: #fff;
      span {
        color: #fff;
        font-size: 14px;
        padding: 2px 0;
      }
    }

    .account-setting {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 13px;
      color: #fff;
      .van-icon-setting-o {
        font-size: 16px;
        vertical-align: -3px;
        margin-right: 4px;
      }
    }
  }
  .user-list {
    margin: 10px;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center; // 垂直居中
      padding: 10px 0;
      border-bottom: 1px solid #f5f5f5;
      font-size: 14px;
      color: #333;
    }
  }
}
</style>
